{% extends "base.html" %}

{% block title %}论文题目查重系统{% endblock %}

{% block content %}
<div class="header-container">
    <div class="header-icon">
        <div class="paper-plane-icon"></div>
    </div>
    <h1>论文题目查重系统</h1>
    <p class="subtitle">基于语义分析和向量检索的智能查重平台</p>
</div>

<div class="card">
    <div class="system-description">
        <h2>系统简介</h2>
        <p>本系统采用先进的自然语言处理技术和向量检索算法，能够准确识别论文题目的语义相似性，有效防止学术不端行为。系统支持单篇查重，提供详细的相似度分析报告。</p>
    </div>
    
    <div class="input-section">
        <h2>论文信息录入</h2>
        <div class="input-group">
            <label for="teacher">指导教师姓名：</label>
            <input type="text" id="teacher" placeholder="请输入指导教师姓名..." value="{{ last_failed_data.teacher if last_failed_data.teacher else '' }}">
            <div class="form-error" id="teacher-error">请输入指导教师姓名</div>
        </div>

        <div class="input-group">
            <label for="student">学生姓名：</label>
            <input type="text" id="student" placeholder="请输入学生姓名..." value="{{ last_failed_data.student if last_failed_data.student else '' }}">
            <div class="form-error" id="student-error">请输入学生姓名</div>
        </div>

        <div class="input-group">
            <label for="student_id">学号：</label>
            <input type="text" id="student_id" placeholder="请输入学号..." value="{{ last_failed_data.student_id if last_failed_data.student_id else '' }}">
            <div class="form-error" id="student_id-error">请输入学号</div>
        </div>

        <div class="input-group">
            <label for="major">专业：</label>
            <input type="text" id="major" placeholder="请输入专业名称...">
            <div class="form-error" id="major-error">请输入专业名称</div>
        </div>

        <div class="input-group">
            <label for="class_name">班级：</label>
            <input type="text" id="class_name" placeholder="请输入班级名称...">
            <div class="form-error" id="class_name-error">请输入班级名称</div>
        </div>

        <div class="input-group">
            <label for="title">论文题目：
                <span class="tooltip">?
                    <span class="tooltiptext">请输入完整的论文题目，系统将与数据库中的题目进行相似度比对</span>
                </span>
            </label>
            <textarea id="title" placeholder="请输入论文题目...">{{ last_failed_data.title if last_failed_data.title else '' }}</textarea>
            <div class="form-error" id="title-error">请输入论文题目</div>
        </div>
    </div>

    <div class="btn-group">
        <button id="check-btn" class="btn-modern btn-primary">
            <div class="paper-plane-icon"></div>开始比对
        </button>
        <button class="btn-modern btn-warning" id="admin-btn">
            <div class="paper-plane-icon"></div>查看数据
        </button>
    </div>
</div>

<!-- 联系方式区域 -->
<div class="card">
    <h2>联系我们</h2>
    <div class="contact-info">
        <p>如有任何问题或建议，请通过以下方式联系我们：</p>
        <div class="contact-methods">
            <div class="contact-item">
                <strong>QQ号：</strong>
                <span>3360171434</span>
            </div>
            <div class="contact-item">
                <strong>微信号：</strong>
                <span>18281140856</span>
            </div>
        </div>
    </div>
</div>

<div id="loading" class="loading">
    正在处理中，请稍候...
</div>

<div id="result" class="result" style="display: none;"></div>

<div class="progress-bar">
    <div class="progress-bar-fill" id="progress-fill"></div>
</div>

<div class="status-info">
    <div class="status-card">
        <h3>数据库统计</h3>
        <p>题目总数：<span id="total-count">{{ total_count }}</span></p>
    </div>
    <div class="status-card">
        <h3>系统状态</h3>
        <p><span id="system-status">就绪</span></p>
    </div>
    <div class="status-card">
        <h3>版本信息</h3>
        <p>v1.0</p>
    </div>
</div>

<div class="features-section">
    <h2>系统特色功能</h2>
    <div class="features-grid">
        <div class="feature-card">
            <div class="feature-icon">🔍</div>
            <h3>多维度分析</h3>
            <p>结合语义相似度、关键词匹配、编辑距离等多种算法进行综合判断</p>
        </div>
        <div class="feature-card">
            <div class="feature-icon">⚡</div>
            <h3>高效检索</h3>
            <p>基于FAISS向量检索技术，支持百万级数据秒级检索</p>
        </div>
        <div class="feature-card">
            <div class="feature-icon">🛡️</div>
            <h3>智能过滤</h3>
            <p>自动识别技术栈扩展类题目，避免误判</p>
        </div>
        <div class="feature-card">
            <div class="feature-icon">📊</div>
            <h3>详细报告</h3>
            <p>提供详细的相似度分析报告和修改建议</p>
        </div>
    </div>
</div>

</div>

{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const checkBtn = document.getElementById('check-btn');
        const batchBtn = document.getElementById('batch-btn');
        const adminBtn = document.getElementById('admin-btn');
        const teacherInput = document.getElementById('teacher');
        const studentInput = document.getElementById('student');
        const studentIdInput = document.getElementById('student_id');
        const majorInput = document.getElementById('major');
        const classInput = document.getElementById('class_name');
        const titleInput = document.getElementById('title');
        const resultDiv = document.getElementById('result');
        const loadingDiv = document.getElementById('loading');
        const totalCountSpan = document.getElementById('total-count');
        const systemStatus = document.getElementById('system-status');
        const progressFill = document.getElementById('progress-fill');
        
        // 表单验证错误提示元素
        const teacherError = document.getElementById('teacher-error');
        const studentError = document.getElementById('student-error');
        const studentIdError = document.getElementById('student_id-error');
        const majorError = document.getElementById('major-error');
        const classError = document.getElementById('class_name-error');
        const titleError = document.getElementById('title-error');
        
        // 验证表单函数
        function validateForm() {
            let isValid = true;
            
            // 隐藏所有错误提示
            teacherError.style.display = 'none';
            studentError.style.display = 'none';
            studentIdError.style.display = 'none';
            majorError.style.display = 'none';
            classError.style.display = 'none';
            titleError.style.display = 'none';
            
            // 验证每个字段
            if (!teacherInput.value.trim()) {
                teacherError.style.display = 'block';
                isValid = false;
            }
            
            if (!studentInput.value.trim()) {
                studentError.style.display = 'block';
                isValid = false;
            }
            
            if (!studentIdInput.value.trim()) {
                studentIdError.style.display = 'block';
                isValid = false;
            }
            
            if (!majorInput.value.trim()) {
                majorError.style.display = 'block';
                isValid = false;
            }
            
            if (!classInput.value.trim()) {
                classError.style.display = 'block';
                isValid = false;
            }
            
            if (!titleInput.value.trim()) {
                titleError.style.display = 'block';
                isValid = false;
            }
            
            return isValid;
        }
        
        // 实时验证
        teacherInput.addEventListener('input', function() {
            if (this.value.trim()) {
                teacherError.style.display = 'none';
            }
        });
        
        studentInput.addEventListener('input', function() {
            if (this.value.trim()) {
                studentError.style.display = 'none';
            }
        });
        
        studentIdInput.addEventListener('input', function() {
            if (this.value.trim()) {
                studentIdError.style.display = 'none';
            }
        });
        
        majorInput.addEventListener('input', function() {
            if (this.value.trim()) {
                majorError.style.display = 'none';
            }
        });
        
        classInput.addEventListener('input', function() {
            if (this.value.trim()) {
                classError.style.display = 'none';
            }
        });
        
        titleInput.addEventListener('input', function() {
            if (this.value.trim()) {
                titleError.style.display = 'none';
            }
        });
        
// 检查模型加载状态
        function checkStatus() {
            systemStatus.textContent = '检查中...';
            progressFill.style.width = '30%';
            
            fetch('/status')
            .then(response => response.json())
            .then(data => {
                if (data.model_loading) {
                    resultDiv.innerHTML = '系统正在后台加载模型，首次运行需要较长时间，请稍后再试...';
                    resultDiv.style.display = 'block';
                    systemStatus.textContent = '模型加载中';
                    progressFill.style.width = '60%';
                    setTimeout(checkStatus, 1000);
                } else {
                    resultDiv.innerHTML = '<div class="welcome-message"><h3>欢迎使用论文题目查重系统</h3><p>请在上方输入完整的指导教师姓名、学生姓名、学号和论文题目，点击"开始比对"按钮进行查重。</p></div>';
                    resultDiv.style.display = 'block';
                    systemStatus.textContent = '就绪';
                    progressFill.style.width = '100%';
                    setTimeout(() => {
                        progressFill.style.width = '0%';
                    }, 1000);
                }
                totalCountSpan.textContent = data.total_count;
            })
            .catch(error => {
                systemStatus.textContent = '连接错误';
                progressFill.style.width = '0%';
                console.error('Status check failed:', error);
            });
        }
        
        // 初始检查状态
        checkStatus();
        
        // 开始比对按钮点击事件
        checkBtn.addEventListener('click', function() {
            // 验证表单
            if (!validateForm()) {
                return;
            }
            
            // 显示加载状态
            loadingDiv.style.display = 'block';
            resultDiv.style.display = 'none';
            systemStatus.textContent = '处理中...';
            progressFill.style.width = '30%';
            
            // 添加按钮加载状态
            checkBtn.classList.add('btn-loading');
            checkBtn.disabled = true;
            
            // 发送请求
            fetch('/check', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    teacher: teacherInput.value.trim(),
                    student: studentInput.value.trim(),
                    student_id: studentIdInput.value.trim(),
                    major: majorInput.value.trim(),
                    class_name: classInput.value.trim(),
                    title: titleInput.value.trim()
                })
            })
            .then(response => response.json())
            .then(data => {
                progressFill.style.width = '70%';
                loadingDiv.style.display = 'none';
                if (data.error) {
                    resultDiv.innerHTML = `<div class="error">错误：${data.error}</div>`;
                } else {
                    if (data.success) {
                        resultDiv.innerHTML = `<div class="success">${data.result}</div>`;
                    } else {
                        resultDiv.innerHTML = data.result;
                    }
                    totalCountSpan.textContent = data.total_count;
                }
                resultDiv.style.display = 'block';
                systemStatus.textContent = '就绪';
                progressFill.style.width = '100%';
                setTimeout(() => {
                    progressFill.style.width = '0%';
                }, 1000);
            })
            .catch(error => {
                loadingDiv.style.display = 'none';
                resultDiv.innerHTML = `<div class="error">请求失败：${error.message}</div>`;
                resultDiv.style.display = 'block';
                systemStatus.textContent = '就绪';
                progressFill.style.width = '0%';
            })
            .finally(() => {
                // 移除按钮加载状态
                checkBtn.classList.remove('btn-loading');
                checkBtn.disabled = false;
            });
        });
        
        // 批量处理按钮已移除
        
        // 数据库管理按钮点击事件
        adminBtn.addEventListener('click', function() {
            window.location.href = '/admin';
        });
    });
</script>
{% endblock %}